<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>回放</title>
    <tc_include file="public:head" />
    <link href="__TMPL__public/assets/js/libs/scroll-bar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="__TMPL__public/assets/css/reset.css">
    <link rel="stylesheet" href="__TMPL__public/assets/css/main.css">
    <link rel="stylesheet" href="__TMPL__public/assets/css/live.css">
    <!--<script src="http://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer.js" charset="utf-8"></script>-->
    <script src="__TMPL__public/assets/sdk/TcPlayer-2.2.0.js"></script>

    <cross-domain-policy>
        <allow-access-from domain="*.qq.com" secure="false"/>
        <allow-access-from domain="qzonestyle.gtimg.cn" secure="false"/>
    </cross-domain-policy>

    <style>
        video{
            object-fit: cover;
        }
        .vcp-player{
            overflow: hidden;
        }
    </style>

</head>
<body>
<div class="center">
    <section id="live-wrap">
        <article class="fl live-left-wrap">
            <div class="live-star-info clearfix">
            </div>
            <div class="playback-info-wrap">
                <span class="left-wrap">
                    <i class="time-total">02:36</i>
                    <b>直播时长</b>
                </span><span class="right-wrap">
                    <i class="view-total">46456456</i>
                    <b>观看人数</b>
                </span>
            </div>
        </article>
        <article class="fl live-middle-wrap" style="display: flex;display: flex; flex:1;align-items:center; vertical-align: middle;">
            <div style="width: 100%; height: 100%; min-height: 500px;  text-align: center;">
                <!--<span class="live-mark">LiveStar</span>-->
                <div id="play_video" style="position: relative; display: inline-block;">
                    <!--<span class="fans-num"></span>-->
                    <span class="host-sid"></span>
                    <span class="play-btn vcp-play"></span>
                </div>
            </div>
        </article>
        <article class="fl live-right-wrap">
            <div>
                <h3 class="playback-rank">
                    <span>场榜</span>
                </h3>
                <ul class="guardWrapper playback-guard" style="">

                </ul>
            </div>
        </article>
    </section>
    <div class="live-footer">
            <span class="app-code">
                手机看
                <img class="code displayNone" src="__TMPL__public/assets/img/app-code.png" alt="">
            </span>
        <span class="share_font">分享：</span>
            <span class="wx-share">
                <img src="__TMPL__public/assets/img/icon_wx.png" alt="">
            </span>

        <div id="qrcode" class="wx-code-pic displayNone">

        </div>
        <!--<span>分享</span>-->
    </div>
</div>

<include file="public@footer" />
<include file="public@scripts" />
<script src="__TMPL__public/assets/js/libs/scroll-bar/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="__TMPL__public/assets/js/libs/qrcode.min.js"></script>

<!--<script type="text/javascript" src="__TMPL__public/assets/sdk/webim.js?v=1"></script>
<script type="text/javascript" src="__TMPL__public/assets/sdk/json2.js"></script>&lt;!&ndash;webim demo js&ndash;&gt;
<script type="text/javascript" src="__TMPL__public/assets/js/im_base.js"></script>
<script type="text/javascript" src="__TMPL__public/assets/js/im_group_notice.js"></script>-->
<script>

$(function(){

    function liveSizeInit(){
        var live_width,live_height,live_size;
        var refer_pos = 9/16;
        var refer_width = 500;
        var refer_height = document.documentElement.clientHeight-60;
        if(refer_width/refer_height>refer_pos){
            live_width = refer_width;
            live_height = refer_width*16/9;
        }else {
            live_width = refer_height*9/16;
            live_height = refer_height;
        }
        live_width = refer_width;
        live_height = refer_height;
        return live_size ={
            live_width:live_width,
            live_height:live_height
        }
    }
    var live_width = liveSizeInit().live_width;
    var live_height = liveSizeInit().live_height;

    function isFullscreenEnabled(){
        return document.fullscreenEnabled       ||
                document.mozFullScreenEnabled    ||
                document.webkitFullscreenEnabled ||
                document.msFullscreenEnabled || false;
    }
    function isFullscreen(){
        var explorer = window.navigator.userAgent.toLowerCase();
        if(explorer.indexOf('chrome')>0){
            //chrome
            if (document.body.scrollHeight == window.screen.height && document.body.scrollWidth == window.screen.width) {
                return true;
            } else {
                return false;
            }
        }else{
            //IE 9+  fireFox
            if (window.outerHeight == screen.height && window.outerWidth == screen.width) {
                return true;
            } else {
                return false;
            }
        }
    }

    $(window).resize(function() {
        var live_size = liveSizeInit();
        var live_nw = live_size.live_width;
        var live_nh = live_size.live_height;
        //将会覆盖原有所有行间样式
        $(".vcp-player").attr("style",'width:'+live_nw+"px!important;"+'height:'+live_nh+"px!important;");
        $("video").attr("style",'width:'+live_nw+"px!important;"+'height:'+live_nh+"px!important;");
        if(isFullscreen()){
            $(".vcp-player").attr("style",'width:'+screen.width+"px!important;"+'height:'+screen.width*16/9+"px!important;");
            $("video").attr("style",'width:'+screen.width+"px!important;"+'height:'+screen.width*16/9+"px!important;");
        }
    });

    var channel = iService.getQueryString("roomid");
    var suid = iService.getQueryString("suid");
    var playback_param = {
        url:'Homes/video',
        data:{
            channel:channel,
            status:1
        }
    };


    $.JsonRpc(playback_param,function(data){
        var play_url = data.data.transcodeList[2].url;
        var player =  new TcPlayer('play_video', {
            rtmp: "",
            "m3u8": play_url,
            "flv":  data.data.transcodeList[1].url, //增加了一个flv的播放地址，用于PC平台的播放
            "autoplay" : false,      //iOS下safari浏览器是不开放这个能力的
            "flash":true,
            "coverpic" : {"style": "cover", "src": "__TMPL__public/assets/images/logo.png"},
            "width" :  live_width,//视频的显示宽度，请尽量使用视频分辨率宽度
            "height" : live_height, //视频的显示高度，请尽量使用视频分辨率高度
            "controls":"",
            "live": false,
            wording: {
                2032: '请求视频失败，请检查网络',
                2048: '请求m3u8文件失败，可能是网络错误或者跨域问题'
            },
            listener: function (msg) {
                console.log(msg.type);
                var play_btn = $(".play-btn");
                function showPlayBtn (){
                    if(player.playing()){
                        play_btn.hide();
                    }else {
                        play_btn.show();
                        play_btn.on("click",function(){
                            player.play();
                            showPlayBtn();
                        });
                    }
                }
                showPlayBtn();
            }
        });
        $(".host-sid").html(suid);

        var play_info_param = {
            url:'Homes/liveInfo',
            data:{
                channel:channel,
                suid:suid
            }
        };

        $.JsonRpc(play_info_param,function(data){
            data = data.data;
            $(".time-total").html(data.l_play);
            $(".view-total").html(data.l_viewing);
            var tpl =
                '<img class="fl host-avatar" src="'+data.u_avatar+'" alt="">'+
                '<div class="fl">'+
                '<h4 class="host-name">'+data.s_name+'</h4>'+
                '<p class="host-popular">人气值：'+data.u_obtain+'</p>'+
                '</div>'+iService.focus_status_btn(data.booked,data.s_udid);
            $(".live-star-info").html(tpl);

            $(".host-sid").html("LSID："+data.s_udid);

            $(".live-star-info").on("click",".focus_btn",function(){
                iService.focus_Fun(this);
            });
            $(".live-star-info").on("mouseover mouseout",".btn_cancel",function(event){
                if(event.type == "mouseover"){
                    $(this).html("取消关注");
                }else if(event.type == "mouseout"){
                    $(this).html("已关注");
                }
            });

            var data_list = data.list,tpl2="";
            $.each(data_list,function(i){
                var className;
                i>2?className="":className="fans_top_three fans_top"+(i+1);
                tpl2 +=
                    '<li>'+
                        '<span class="fl fans_rank '+className+'"></span>'+
                        '<img class="fl fans_head" src="'+data_list[i].u_avatar+'" alt="">'+
                        '<h4 class="fl fans_name">'+data_list[i].u_nickname+'</h4>'+
                        '<span class="fr fans_lb_num">'+data_list[i].u_score+'L币</span>'+
                    '</li>';
            });

            $(tpl2).appendTo(".playback-guard");
            $(".playback-guard").html(tpl2);


           /* <ul class="guardWrapper playback-guard" style="">
                <li>
                    <span class="fl fans_rank fans_top1 fans_top_three"></span>
                    <img class="fl fans_head" src="http://avatar.kancloud.cn/0e/b52592bc13e5fa22465f5f3a14881a" alt="">
                    <h4 class="fl fans_name">若璃22</h4>
                    <span class="fr fans_lb_num">3445L币</span>
                </li>*/
        });

    });

//    /Homes/liveInfo

})

</script>
</body>
</html>























